<template>
    <div class="son">
        <h3>子组件</h3>
        <!-- 
            4. 使用通过 props 接收的父组件
            传递过来的数据
         -->
        <p>父组件传递过来的数据：{{ person }}</p>
    </div>
</template>

<script setup>
// 导入 Vue 3 的内置函数
import {
    defineProps
} from 'vue'

// 3. 通过 props 接收父组件中传递过来的数据
// 通过 props 接收的数据在模板中可以直接使用
// 无需 props.属性名
const props = defineProps(['person'])
</script>

<style lang="scss" scoped>
.son {
    height: 150px;
    width: auto;
    margin: 10px;
    background-color: chartreuse;
}
</style>